<template>
    <div class="content-wrapper-view">
		<div class="add_goods">
            
            <el-row>
                <el-col :span="24">
                    <el-row>
                        <el-col :span="24">
                            <div class="title">
                                {{title}}
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="body">
                        <el-col :span="24">
                            <el-row :gutter="20">
                                <el-col :span="18" class="cms-form-box">

                                    <el-row>
                                        <el-col>
                                            <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="80px" class="cms-form">

                                                <el-form-item label="商品名称" prop="name" >
                                                    <el-input v-model="form.name" placeholder="商品名称"></el-input>
                                                </el-form-item>

                                                <el-form-item label="商品简述">
                                                    <el-input
                                                            type="textarea"
                                                            :autosize="{ minRows: 3, maxRows: 3}"
                                                            placeholder="请输入商品简述"
                                                            v-model="form.sketch">
                                                    </el-input>
                                                </el-form-item>

                                                <el-row :gutter="20">
                                                    <el-col :span="24">
                                                        <el-form-item label="商品标签">
                                                            <el-select
                                                                v-model="tags"
                                                                multiple
                                                                filterable
                                                                allow-create
                                                                default-first-option
                                                                remote
                                                                reserve-keyword
                                                                @change="handleChangeTags"
                                                                :remote-method="remoteMethod"
                                                                :loading="loadingGetTags"
                                                                placeholder="请选择文章标签"
                                                                style="width: 100%">
                                                                    <el-option
                                                                    v-for="item in tagOptions"
                                                                    :key="item.id"
                                                                    :label="item.name"
                                                                    :value="item.id">
                                                                    </el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                
                                                <el-row :gutter="20">
                                                    <el-col :span="8">
                                                        <el-form-item label="销售价">
                                                            <el-input-number style="width: 100%;" v-model="form.price" controls-position="right" :precision="2" :step="0.1" :min="0.00"></el-input-number>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-form-item label="市场价">
                                                            <el-input-number style="width: 100%;" v-model="form.marketPrice" controls-position="right" :precision="2" :step="0.1" :min="0.00"></el-input-number>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-form-item label="总库存">
                                                            <el-input-number style="width: 100%;" v-model="form.stock" controls-position="right" :min="0"></el-input-number>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>

                                                <el-row :gutter="20">
                                                    <el-col :span="8">
                                                        <el-form-item label="商品分类">
                                                            <el-cascader
                                                                clearable
                                                                :options="categoryOptions"
                                                                :props="defaultProps"
                                                                v-model="categoryIds"
                                                                @change="handleChangeCascader"
                                                                placeholder="请选择" style="width: 100%"
                                                                >
                                                            </el-cascader>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-form-item label="商品类型">
                                                            <el-select v-model="form.typeId" clearable placeholder="请选择" style="width: 100%">
                                                                <el-option
                                                                        v-for="item in typeOptions"
                                                                        :key="item.id"
                                                                        :label="item.name"
                                                                        :value="item.id">
                                                                </el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-form-item label="品牌">
                                                            <el-select v-model="form.brandId" clearable placeholder="请选择" style="width: 100%">
                                                                <el-option
                                                                        v-for="item in brandOptions"
                                                                        :key="item.id"
                                                                        :label="item.name"
                                                                        :value="item.id">
                                                                </el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>

                                                <el-row :gutter="20">
                                                    <el-col :span="8">
                                                        <el-form-item label="内容类型">
                                                            
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-form-item label="发布时间">
                                                            
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-form-item label="归档日期">
                                                            
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>

                                                <el-form-item label="商品主图">
                                                    <el-upload
                                                        :action="UPLOAD_URL"
                                                        :data="uploadData"
                                                        :limit="limit"
                                                        list-type="picture-card"
                                                        :on-preview="handlePictureCardPreviewMaster"
                                                        :on-remove="handleRemoveMaster"
                                                        :on-success="hanldeUploadSuccessMaster"
                                                        >
                                                        <i class="el-icon-plus"></i>
                                                    </el-upload>
                                                    <el-dialog :visible.sync="dialogVisibleMaster">
                                                        <img width="100%" :src="dialogImageUrlMaster" alt="">
                                                    </el-dialog>
                                                </el-form-item>

                                                <el-form-item label="商品图片">
                                                    <el-upload
                                                        :action="UPLOAD_URL"
                                                        :data="uploadData"
                                                        :multiple="multiple"
                                                        list-type="picture-card"
                                                        :on-preview="handlePictureCardPreview"
                                                        :on-remove="handleRemove"
                                                        :on-success="hanldeUploadSuccess"
                                                        >
                                                        <i class="el-icon-plus"></i>
                                                    </el-upload>
                                                    <el-dialog :visible.sync="dialogVisible">
                                                        <img width="100%" :src="dialogImageUrl" alt="">
                                                    </el-dialog>
                                                </el-form-item>

                                                <el-form-item label="商品详情" class="detail">
                                                    <tinymce :height="300" v-model="content" />
                                                </el-form-item>

                                            </el-form>
                                        </el-col>
                                    </el-row>

                                </el-col>

                                <el-col :span="6">

                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <span class="card-header"><i class="el-icon-search"></i> 发布</span>
                                                </div>
                                                <el-row class="publish-card">
                                                    <el-col>

                                                        <el-row class="margin-bottom-20">
                                                            <el-col>
                                                                <span class="text">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                                                                <el-select v-model="form.status" placeholder="请选择" size="small">
                                                                    <el-option
                                                                            v-for="item in statusOptions"
                                                                            :key="item.value"
                                                                            :label="item.label"
                                                                            :value="item.value"
                                                                            >
                                                                    </el-option>
                                                                </el-select>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row class="margin-bottom-20">
                                                            <el-col>
                                                                <span class="text">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序：</span>
                                                                <el-input-number v-model="form.sort" :min="1" :max="999999" size="small" style="width: 200px"></el-input-number>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row class="footer">
                                                            <el-col>
                                                                <el-button v-if="this.params.contentId == null" @click="handleCreate('form')" type="primary" size="small" icon="el-icon-search">提 交</el-button>
                                                                <el-button v-if="this.params.contentId != null" @click="handleUpdate('form')" type="primary" size="small" icon="el-icon-search">修 改</el-button>
                                                                <el-button plain type="info" size="small">预 览</el-button>
                                                            </el-col>
                                                        </el-row>

                                                    </el-col>
                                                </el-row>

                                            </el-card>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <span>分类</span>
                                                </div>
                                                <div v-for="o in 4" :key="o" class="text item">
                                                    {{'列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <span>标签</span>
                                                </div>
                                                <div v-for="o in 4" :key="o" class="text item">
                                                    {{'列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>

                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>


            <back></back>
            <back-to-top></back-to-top>
        </div>
    </div>
</template>

<script>
    import { created, updated, deleted, selectOne, selectList, selectPage, UPLOAD_URL } from '@/api/mall/Goods'
    import { selectTree } from '@/api/mall/GoodsCategory'
    import { selectList as selectListBrand } from '@/api/mall/GoodsBrand'
    import { selectList as selectListType } from '@/api/mall/GoodsType'
    import { selectList as selectListTags } from '@/api/mall/GoodsTags'
    import { ResultMessage } from '@/libs/response'
    import { isAuth } from "@/libs/auth";
    import Back from "@/components/Back";
    import BackToTop from "@/components/BackToTop";
    import Tinymce from "@/components/Tinymce";
    import valid from '@/libs/rules'

    const statusOptions = [{
        value: 0,
        label: '未上架'
    }, {
        value: -1,
        label: '下架'
    }, {
        value: 1,
        label: '上架'
    }, {
        value: 2,
        label: '预售'
    }]

    

    export default {
        name: 'AddGoods',
        components: {
            Back, BackToTop, Tinymce
        },
        data() {
            let required = valid.required('此项必填')
            return {
                /**
                 * goodsId
                 */
                params: this.$route.query, //前一个页面带过来的数据
                title: '添加商品',
                loading: false,
                loadingGetTags: false,
                
                statusOptions,
                form: {
                    name: null,
                    categoryId: null,
                    categoryIds: null,
                    sketch: null,
                    intro: null,
                    keywords: null,
                    tags: null,
                    marque: null,
                    barcode: null,
                    price: null,
                    marketPrice: null,
                    stock: null,
                    pictureUrl: null,
                    status: 0,
                    state: 0,
                    sort: 99,
                    imageList: []
                },
                content: null,
                images: [],

                tags: [],
                tagOptions: [],

                categoryIds: [],
                categoryOptions: [],
                brandOptions: [],
                typeOptions: [],
                defaultProps: {
                    label: "name",
                    value: "id",
                    children: "children"
                },

                dialogImageUrlMaster: '',
                dialogVisibleMaster: false,
                dialogImageUrl: '',
                dialogVisible: false,
                limit: 1,
                multiple: true,
                UPLOAD_URL,
                uploadData: {
                    ossName: 'qiniuyun',
                    bucketName: 'test',
                },

                rules: {
                    name: [required]
                }
            }
        },
        
        created() {
            this.getGoodsCategory()
            this.getGoodsBrand()
            this.getGoodsType()
            this.getGoodsTags()

            //编辑商品数据
            if(this.params.goodsId) {
                this.title = '编辑商品'
                this.handleUpdate(this.params.goodsId)
            }
        },

        methods: {
            handleCreate(formName) {
                let imageList = []
                for(let item of this.images) {
                    if(item.response.flag) {
                        imageList.push(item.response.data.url)
                    }
                }
                this.form.imageList = imageList
                this.form.tags = (this.tags.length > 0 ? this.tags.join(','): null)
                
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        created(this.form).then(response => {
                            if(ResultMessage(response)) {
                            } else {
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '添加失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }
                })
            },
            handleUpdate(id) {
                this.getData(id).then(response => {
                    if(response) {
                        this.form = Object.assign({}, response.data.data)

                        if(this.form.categoryIds) {
                            this.categoryIds = []
                            //内容分类,将IDS字符串转换为int数组
                            const categoryIdsStr = this.form.categoryIds.split(',')
                            for(let str of categoryIdsStr) {
                                this.categoryIds.push(parseInt(str))
                            }
                        }
                    }
                })
            },

            getData(id) { //根据ID查询商品
                this.listLoading = true
                return selectOne(id).then(response => {
                    if(ResultMessage(response, false)) {
                        this.listLoading = false
                        return response
                    } else {
                        this.listLoading = false
                        return null
                    }

                }).catch(error => {
                    this.$notify({
                        title: '提示', message: '根据ID获取数据失败',
                        type: 'error', duration: 2000
                    })
                    this.listLoading = false
                })
            },

            /* 获取商品分类 */
            getGoodsCategory() {
                selectTree().then((response) => {
                    this.categoryOptions = response.data.data
                })
            },
            handleChangeCascader(value) {
                if(value.length > 0) {
                    this.form.categoryId = value[value.length -1]
                    this.form.categoryIds = value.join(',')
                } else {
                    this.form.categoryId = null
                    this.form.categoryIds = null
                }
            },

             /* 获取商品品牌 */
            getGoodsBrand() {
                selectListBrand().then((response) => {
                    this.brandOptions = response.data.data
                })
            },
            /* 获取商品类型 */
            getGoodsType() {
                selectListType().then((response) => {
                    this.typeOptions = response.data.data
                })
            },

            /* 获取商品标签 */
            getGoodsTags(params) {
                return selectListTags(params).then(response => {
                    this.tagOptions = response.data.data
                })
            },
            /* 变更tags */
            handleChangeTags(values) {
                console.log(values)
            },
            /* 远程搜索Tags */
            remoteMethod(query) {
                if (query !== '') {
                    this.loadingGetTags = true;
                    this.getGoodsTags({name: query}).then(() => {
                        this.loadingGetTags = false;
                    })
                } else {
                    this.tagOptions = [];
                }
            },

            /* 上传商品主图 */
            handleRemoveMaster(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreviewMaster(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            hanldeUploadSuccessMaster(response, file, fileList) {
                this.form.pictureUrl = response.data.url
                if(response.flag == false) {
                    this.$notify({
                        type: 'error',
                        title: '文件上传失败',
                        message: file.name,
                        duration: 2000,
                    });
                }
            },

            /* 上传商品图片 */
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            hanldeUploadSuccess(response, file, fileList) {
                console.log(file)
                console.log(response)

                this.images = fileList

                if(response.flag == false) {
                    this.handleRemove(file, fileList)
                    this.$notify({
                        type: 'error',
                        title: '文件上传失败',
                        message: file.name,
                        duration: 2000,
                    });
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
.detail{
    .el-form-item__content{
        line-height: 0px;
    }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../../../assets/styles/common";

    .add_goods {
        padding: 10px 0;
        border: 1px solid #e8eaec;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all 0.2s ease-in-out;
        &:hover {
            border-color: #eee;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        }
        .title {
            height: 48px;
            line-height: 40px;
            padding-left: 10px;
            border-bottom: 1px solid #dcdcdc;
            margin-bottom: 10px;
        }

        .body{
            padding: 10px;
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            position: relative;
            transition: all 0.2s ease-in-out;
        }
    }
    
        
        
</style>